<template>
  <div class="home-con">
    <el-row class="conent-top">
      <el-col
        :span="8"
        v-for="item in dingdanArr"
        :key="item.id"
        class="item-dd"
      >
        <div class="item-img"><img :src="item.img" alt="图片" /></div>
        <div>
          <div>{{ item.name }}</div>
          <div>{{ item.price }}</div>
        </div>
      </el-col>
    </el-row>

    <el-card class="box-card conent-com">
      <div>
        <div slot="header" class="clearfix com-hd">
          <span><i class="iconfont icon-dingdan1"></i> 待处理事务</span>
        </div>
        <div>
          <ul class="com-bd">
            <li v-for="order in daichuliArr" :key="order.id">
              <span class="pay">{{ order.name }}</span>
              <span class="nums">({{ order.num }})</span>
            </li>
          </ul>
        </div>
      </div>
    </el-card>
    <!-- 显示图标内容 -->
    <div class="conent-bottom">
      <div class="shops-list">
        <div class="shop-title">商品总览</div>
        <div class="shop-main">
          <div v-for="product in shangpinArr" :key="product.id">
            <p class="p1">{{ product.num }}</p>
            <p class="p2">{{ product.name }}</p>
          </div>
        </div>
      </div>
      <div class="shops-list">
        <div class="shop-title">用户总览</div>
        <div class="shop-main">
          <div v-for="users in yonghuArr" :key="users.id">
            <p class="p1">{{ users.num }}</p>
            <p class="p2">{{ users.name }}</p>
          </div>
        
        </div>
      </div>
    </div>
    <!-- 订单统计 -->
     <el-card class="box-card stat-com">
      <div>
        <div slot="header" class="clearfix stat-hd">
          <span>订单统计 </span>
        </div>
        <div class="stat-bd">
          <div v-for="stat in tongjiArr" :key="stat.id" class="stat-title">
            <p class="stat-p1">{{stat.name}}</p>
            <p class="stat-p2">{{stat.num}}</p>
            <p class="stat-p3"><span :class="stat.type > 0 ? 'stat-p4':'stat-p5'">{{stat.type>0?'+'+stat.type:stat.type}}%</span>{{stat.dec}}</p>
          </div>
        </div>
      </div>
    </el-card>
    <div id="mychart" class="mychart"></div>
    <div id="pieChart" class="pieChart"></div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      dingdanArr: [
        {
          id: 1,
          name: "今日订单总数",
          price: "200",
          img: require("@/assets/images/home_order.png"),
        },
        {
          id: 2,
          name: "今日销售总额",
          price: "￥5000",
          img: require("@/assets/images/home_today_amount.png"),
        },
        {
          id: 3,
          name: "昨日订单总数",
          price: "￥3000",
          img: require("@/assets/images/home_yesterday_amount.png"),
        },
      ],
      //待处理事务
      daichuliArr: [
        { id: 1, name: "代付款订单", num: 10 },
        { id: 2, name: "已完成订单", num: 5 },
        { id: 3, name: "待确认收货订单", num: 20 },
        { id: 4, name: "代发货订单", num: 30 },
        { id: 5, name: "新缺货登记", num: 6 },
        { id: 6, name: "待处理退款申请", num: 8 },
        { id: 7, name: "已发货订单", num: 12 },
        { id: 8, name: "待处理退货订单", num: 9 },
        { id: 9, name: "广告位即将到期", num: 10 },
      ],
      //商品总览
      shangpinArr: [
        { id: 1, name: "已下架", num: 100 },
        { id: 2, name: "已上架", num: 400 },
        { id: 3, name: "库存紧张", num: 50 },
        { id: 4, name: "全部商品", num: 500 },
      ],
      //用户总览
      yonghuArr: [
        { id: 1, name: "今日新增", num: 100 },
        { id: 2, name: "昨日新增", num: 200 },
        { id: 3, name: "本月新增", num: 1000 },
        { id: 4, name: "会员总数", num: 5000 },
      ],
      //订单统计
      tongjiArr: [
        { id: 1, name: "本月订单统计", num: 10000, type: 10, dec: "同比上月" },
        { id: 2, name: "本周订单总数", num: 1000, type: -10, dec: "同比上周" },
        { id: 3, name: "本月销售总额", num: 100000, type: 10, dec: "同比上月" },
        { id: 4, name: "本月销售", num: 50000, type: -10, dec: "同比上周" },
      ],
      //图表数据
      option: {
        //图表数据
        //x轴数据
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        //y轴
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [400, 200, 150, 80, 70, 110, 200],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      },
      pieEcharts: {
        title: {
          text: "商品总览",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [], //填充后台数据
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },

  methods: {
    lineEcharts: function () {
      let mychart = this.$echarts.init(document.getElementById("mychart"));
      mychart.setOption(this.option);
    },
    pmsEcharts: function () {
      let mychart = this.$echarts.init(document.getElementById("pieChart"));
      var data = [];
      this.shangpinArr.forEach((item) => {
        data.push({ value: item.num, name: item.name });
      });
      this.pieEcharts.series[0].data = data;
      mychart.setOption(this.pieEcharts);
    },
  },
  mounted() {
    console.log(this.$echarts);
    this.lineEcharts();
    this.pmsEcharts();
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;
}
.home-com {
  padding: 10px;
}
.conent-top {
  /* border: 1px solid red; */
  box-sizing: border-box;
  margin-top: 80px;
  padding-left: 60px;
  width: 100%;
  display: flex;
  height: 100px;
}
.item-dd {
  border: 1px solid #ccc;
  margin-right: 20px;
  display: flex;
  justify-content: space-around;
  border-radius: 10px;
  height: 100px;
  padding: 16px;
}
.item-img img {
  width: 50px;
}
.el-row {
  display: flex;
}
.mychart {
  height: 500px;
}
.pieChart {
  height: 500px;
}
.conent-com {
  margin-top: 20px;
  /* border: 1px solid red; */
  box-sizing: border-box;
  margin-top: 80px;
  padding-left: 40px;
  width: 100%;
  display: flex;
  flex-direction: column;

  height: 207px;
}
.com-hd {
  box-sizing: border-box;
  text-align: left;
  text-indent: 12px;
  font-weight: 500;
  font-size: 17px;
  color: #777;
  background: #f2f6fc;
  width: 100%;
  flex: 50;
  line-height: 50px;
}
.conent-com .com-bd {
  position: relative;

  /* background: red;
    border: 1px solid red; */
  box-sizing: border-box;

  font-weight: 400;
  font-size: 16px;
  color: #606266;
  flex: 160;
  display: flex;
  flex-wrap: wrap;
}
.conent-com .com-bd li {
  clear: both;
  text-align: left;
  margin-right: 12px;
  width: 30%;
  height: 37px;
  line-height: 37px;
  border-bottom: 1px solid #ccc;
}
.pay {
  float: left;
  margin-left: 10px;
  color: #777;
  font-size: 16px;
}
.nums {
  float: right;
  position: relative;
  text-align: right;
  color: #f66c6c;
}
.conent-bottom {
  box-sizing: border-box;
  margin: 20px;
  padding-left: 60px;
  width: 100%;
  display: flex;
  /* background: green; */
  height: 188px;
}
.conent-bottom div {
  margin-right: 18px;

  box-sizing: border-box;
  width: 46%;
}
.shops-list {
  border: 1px solid #ccc;
}

.conent-bottom div .shop-title {
  text-align: left;
  text-indent: 10px;
  font-size: 16px;
  color: #777;
  background: #f2f6fc;
  width: 100%;
  height: 50px;
  line-height: 50px;
}
.conent-bottom div .shop-main {
  text-align: left;
  text-indent: 10px;
  font-size: 16px;

  width: 100%;
  height: 134px;
  display: flex;
}
.conent-bottom div .shop-main div {
  width: 25%;
  /* border: 1px solid red; */
  box-sizing: border-box;

  text-align: center;
}
.p1 {
  margin-top: 43px;
  font-size: 20px;
  color: #f66c6c;
}
.p2 {
  margin-top: 8px;
  font-size: 16px;
  color: #666;
}
.stat-com {
   margin-top: 20px;
  /* border: 1px solid red; */
  box-sizing: border-box;
  margin-top: 80px;
  padding-left: 40px;
  width: 100%;
  display: flex;
  flex-direction: column;

  height: 478px;
}
.stat-com .stat-hd {
  margin-top: -20px;
  border: 1px solid #ccc;
   box-sizing: border-box;
  text-align: left;
  text-indent: 12px;
  font-weight: 500;
  font-size: 17px;
  color: #777;
  background: #f2f6fc;
  width: 100%;
  flex: 50;
  line-height: 50px;
}
.stat-com .stat-bd {
  width: 100%;
  height: 420px;
  border: 1px solid #ccc;
  border-top: 0;
  margin-bottom: 10px;
}
.stat-com .stat-bd .stat-title {
  box-sizing: border-box;
  width: 212px;
  height: 105px;
  border-right:1px solid #ccc;



  /* border: 1px solid #ccc; */

}
.stat-title .stat-p1 {
  text-indent: 20px;
  padding-top: 20px;
  box-sizing: border-box;
  width: 100%;

  line-height: 20px;
  font-size: 12px;
  color: #666;
 
} 
.stat-title .stat-p2 {
  text-indent: 20px;
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  line-height: 38px;
  font-size: 12px;
  font-size: 17px;

}
.stat-title .stat-p3 {
    text-indent: 20px;
  box-sizing: border-box;
  width: 100%;
  height: 25px; 
  font-size: 12px;
  color: #c0c4d5;

  text-indent: 20px;
}
.stat-p4 {
    margin-right:2px;
  color: #67c23a;
  font-size: 10px;
}
.stat-p5 {
  margin-right:2px;
  color: #f7826c;
  font-size: 10px;
}
</style>